<app-common-header [title]="'myAccount.setting.accountScurity.emailCreateFunction.title'|translate" [routerUrl]="'/tabs/myAccount/setting/account-security'"></app-common-header>
<ion-content>
  <form [formGroup]="validateForm" name="validateForm" role="form" (ngSubmit)="verifyEmail()">
    <ion-grid class="content_title">
      <ion-row >
        <ion-col size="12">
          <div class="content_title_top">
            {{'myAccount.setting.accountScurity.emailCreateFunction.subTitle'|translate}}
          </div>
        </ion-col>
        <ion-col size="12">
          <div class="content_title_down">
            {{'myAccount.setting.accountScurity.emailCreateFunction.tip'|translate}}
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-grid>
      <ion-row class="email_input">
        <ion-col size="12">
          <ion-input type="email" clearInput="true" placeholder="{{'myAccount.setting.accountScurity.emailCreateFunction.email'|translate}}" formControlName="email"></ion-input>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="12" *ngIf="email.invalid && (email.dirty || email.touched)">
          <div *ngIf="email.errors.required" class="form-error-item">
            {{'myAccount.setting.accountScurity.emailCreateFunction.emailRequired'|translate}}
          </div>
          <div *ngIf="email.hasError('pattern')" class="form-error-item">
            {{'myAccount.setting.accountScurity.emailCreateFunction.email_format_error' | translate}}
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-grid>
      <ion-row>
        <ion-col size="12">
          <ion-button expand="full" fill="clear" class="customer-btn" type="submit" [disabled]='validateForm.invalid'>
            {{'myAccount.setting.accountScurity.emailCreateFunction.next'|translate}}
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-content>
